<template>
  <transition name="slide">
	<div class="settle">
      <header-common :title="title"></header-common>
        <section>
            <div class="list"  @click="addressChose">
                <div class="info">
                    <div class="lo"><span></span></div>
                    <div class="name">王先生</div>
                    <div class="pa">
                        <div class="phone">13517001709</div>
                        <div class="address">北京市海淀区过偶记电光火石离开过后</div>
                    </div>
                    <div class="ri">
                        <i class="icon-font icon-more">&#xe6a7;</i>    
                    </div>
                </div>
            </div>
            <!--商品-->
            <div class="goods">
                <div class="img"><img src="./2.jpg"></div>
                <div class="txt">
                    <div class="goodsName">收到货过得更好商量好嘎多开个会</div>
                    <div class="sss">
                        <div class="left">
                            <span>型号</span>
                            <i>尺寸</i>
                        </div>
                        <div class="price">
                            ￥99.00
                        </div>
                    </div>
                </div>
            </div>
            <!--数量-->
            <div class="number">
                数量
                <div class="jsq">
                    <div class="reduce">-</div>
                    <div class="digit"><input type="text" value="1"></div>
                    <div class="add">+</div>
                </div>
            </div>
            <!--优惠券-->
            <div class="check">
                <div class="checkbox"><i></i>已选择一张优惠券</div>
                <div class="reduceNum"><span>-5.00</span><i></i></div>
            </div>


            <!--应付金额-->
            <div class="pay">
                <h1 class="head">
                    <div class="greyThree">应付金额</div>
                    <div class="red"><i>￥</i><span>94.00</span></div>
                </h1>
                <div class="payMethod weixin">
                    <i class="icon-font icon-checkbox">&#xe670;</i>   
                    <em  class="wechat"></em>
                    <span>微信支付</span>
                </div>
                <div class="payMethod Alipay">
                    <i class="icon-font icon-checkbox">&#xe670;</i>   
                    <em class="ali"></em>
                    <span>支付宝支付</span>
                </div>
            </div>

            <!--给商家留言-->
            <div class="message">
                <textarea placeholder="给商家留言，选填，不超过140个字"></textarea>
            </div>
        </section>
        <div class="footer"><div class="btn">去付款</div></div>     
	</div>
</transition>		
</template>
<script>
import HeaderCommon from 'base/header-common/header-common'

export default{
    data() {
      return {
        title:'结算'        
      }
    },    
    computed:{
    },
    created(){
    },
    methods:{
        addressChose (){
            this.$router.push({
            path: `/addrlist/`
            })               
        }      
    },
    components: {HeaderCommon}
  }	
</script>
<style scoped lang='scss' type="text/css">
  @import "~common/scss/variable.scss";
  @import "~common/scss/mixin.scss";
.settle{
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
}
  .slide-enter-active,.slide-leave-active{
    transition:all 0.3s;
  }
  .slide-enter,.slide-leave-to{
    transform:translate3d(100%,0,0);
  } 

/*section*/
section{
    /*地址*/
    .list{
        color:$color-text-d;
        font-size:$font-size-small;
        padding-top:15px;
        .info{
            padding:0 15px 6px;
            border-bottom:1px solid #e7e7e7;
            display:flex;
            display:-webkit-flex;
        }        
    }
}

.address{
    color:$color-text-ll;
}
.name,.phone{
    font-size:$font-size-medium;
}
.lo,.ri{
    flex:1;
}
.ri .icon-more{
    font-size: 22px;
}
.name{
    flex:2;
    line-height:20px;
}
.pa{
    flex:8;
}
.phone{
    height:25px;
}
.address{
    line-height:20px;
}
.ri{
    display:flex;
    display:-webkit-flex;
    align-items:center;
    justify-content:flex-end;
}
/*商品*/
.goods{
    margin-left:15px;
    padding:8px 15px 8px 0;
    border-bottom:1px solid #e7e7e7;
    display:flex;
    display:-webkit-flex;
}
.img{
    flex:1;
}
.txt{
    flex:3;
}
.img>img{
    display:block;
    width:67px;
    height:67px;
    border-radius:2px;
}
.goodsName{
    color:$color-text-d;
    font-size:$font-size-medium-x;
    line-height:20px;
    margin-top:5px;
}
.sss{
    overflow:hidden;
    margin-top:10px;
}
.sss i{
    font-style:normal;
}
.sss>.left{
    color:$color-text-ll;
    font-size:$font-size-small;
}
.sss>.left>span{
    padding-right:10px;
}
.price{
    float:right;
    text-align:right;
    color:$color-text-d;
    font-size:$font-size-medium;
}
/*数量number*/
.number{
    color:$color-text-ll;
    height:45px;
    line-height:45px;
    margin-left:15px;
    position:relative;
    border-bottom:1px solid #e7e7e7;
}
.jsq{
    position:absolute;
    right:15px;
    width:90px;
    height:25px;
    border:1px solid $color-background;
    border-radius:3px;
    top:10px;
    display:flex;
    display:-webkit-flex;
    align-items:center;
    justify-content:center;
}
.jsq>div{
    flex:1;
    text-align:center;
    height:25px;
    line-height:25px;
}
.jsq>.digit{
    flex:2;
}
.digit>input{
    width:100%;
    text-align:center;
}
.reduce{
    background-color:$color-background;
}
.digit{
    border-left:1px solid $color-background;
    border-right:1px solid $color-background;
}
/*优惠券*/
.check{
    height:45px;
    margin-left:15px;
    padding-right:15px;
    border-bottom:1px solid #e7e7e7;
    display:flex;
    display:-webkit-flex;
    align-items:center;
    font-size:$font-size-medium;
    color:#333;
}
.check>div{
    flex:1;
}
.checkbox>i{
    display:inline-block;
    width:13px;
    height:13px;
    padding-right:7px;
    position:relative;
    top:1px;
}
.reduceNum{
    text-align:right;
}
.reduceNum>span{
    padding-right:5px;
    color:$color-sub-theme;
}
.reduceNum>i{
    display:inline-block;
    width:8px;
    height:15px;
    position:relative;
    top:1px;
}
.cho{
    height:50px;
    display:flex;
    display:-webkit-flex;
    align-items:center;
    justify-content:center;
    border-top:1px solid $color-background;
}
.cho>div{
    flex:1;
    text-align:center;
    height:25px;
    font-size:15px;
}
/*应付金额*/
.pay{
    padding:8px 15px;
    border-bottom:1px solid #e7e7e7;
}
.head{
    display:flex;
    display:-webkit-flex;
    align-items:center;
    font-size:$font-size-medium;
    font-weight:normal;
    height:35px;
}
.head>.greyThree{
    font-size:$font-size-medium-x;
    flex:1;
}
.head>.red{
    flex:2;
    text-align:right;
    font-size:$font-size-large;
}
.head>.red>i{
    font-style:normal;
    font-size:10px;
}
.payMethod{
    height:30px;
    line-height:30px;
    display:flex;
    display:-webkit-flex;
    align-items:center;
    margin-bottom:5px;
}
.payMethod>i{
    display:inline-block;
    width:13px;
    height:13px;
    padding-right:10px;
}
.payMethod>span{
    padding-left:10px;
}
/*留言*/
.message{
    border-bottom:1px solid #e7e7e7;
    padding:8px 15px;
}
.message>textarea{
    width:100%;
    height:100px;
}
/*footer*/
.footer{
    height:50px;
    position:fixed;
    width:100%;
    bottom:0;
    padding-top:10px;
}
.footer .btn {
    color: #fff;
    text-align: center;
    background-color: $color-sub-theme;
    width: 84%;
    margin: 0 auto;
    border-radius: 3px;
    height: 40px;
    line-height: 40px;
    letter-spacing:1px;
}
/*支付图标*/
.ali,.wechat{
    width:21px;
    height:21px;
    display: inline-block;
    background-size:100% 100%;
}
.ali{
   @include bg-image('icon_zfb');
}
.wechat{
   @include bg-image('icon_weixin');
}

</style>